<template>
    <div class="teach-title">
        <div class="title-right">
            <router-link v-for="(list, index) in navList" :key="index" :to="list.path" :class="{checked:index == n}" @click.native="changes(index)">
              {{list.title}}
            </router-link>
        </div>
    </div>
</template>

<script>
    export default {
        name:'secondNav',
        props:{
            navList:{
                type:Array,
                default:false
            }
        },
    	data() {
    		return {
                n:0
    		}
    	},
        mounted() {
        },
    	methods: {
            changes(i){
                this.n = i;
            }
    	}
    }
</script>

<style scoped lang="scss">
      .router-link-active{
		  color: #fff;

            background-color: #84a8f3  !important;
            	// box-shadow: 1px 4px 7px 0px 
            	// 	rgba(34, 48, 76, 0.04);
       }
    .teach-title {
        position: relative;
        // padding: 0 40px;
        height: 42px;
        display: flex;
        flex-direction: row;
        align-items: center;
		
		
        .title-left{
            width: 200px;
        }
        .title-right{
            display: flex;
            height: 100%;
            a{
                display: block;
                width: 184px;
                height: 100%;
                line-height: 42px;
                text-align: center;
				// background-color: #fff;
				border-right: 1px solid #84a8f3;
				

				&:last-child{
					border: none;
					border-top-right-radius: 21px;
					border-bottom-right-radius: 21px;
					border-right: 1px solid #84a8f3;
					border-top: 1px solid #84a8f3;
					border-bottom: 1px solid #84a8f3;
				}
				&:first-child{
					border-top-left-radius: 21px;
					border-bottom-left-radius: 21px;
					border-top: 1px solid #84a8f3;
					border-left: 1px solid #84a8f3;
					border-bottom: 1px solid #84a8f3;
				}
            }

        }
        .ll{
            position: absolute;
            top: 0;
            right: 40px;
            height: 100%;
            display: flex;
            align-items: center;
			
        }
    }
    a{
        color: #737171;
		border-top: 1px solid #84a8f3;
		border-bottom: 1px solid #84a8f3;
    
        &:active{
            color: #ccc;
        }
    }
	.router-link-active{
		border: 1px solid #84a8f3;
	}
</style>
